<template>
  <div class="home">
    <ResizeBox>
      <template #left>
        <Tree @setDataConfig="setDataConfig" />
      </template>
      <template #leftBottom>
        <LabelManage ref="labelMangeRef" @afterClick="afterClick"></LabelManage>
      </template>
      <div
        id="container"
        ref="container"
        slot="main"
        :style="{ position: 'relative' }"
      >
        <!--标记框-->
        <div :style="{ padding: '0 16px 16px 16px' }">
          <template v-if="dataConfig">
            <div
              v-for="(item, index) in dataConfig"
              :id="item.jsonName"
              :key="index"
              :class="{ chat: item.render === 'chat' }"
              class="block-item"
            >
              <!--<JSONText :item="item"></JSONText>-->
              <div :key="item.jsonName + 'title' + index" class="title">
                <img
                  :src="require('@/static/icon/icon_title-decoration.png')"
                  class="title-img"
                />
                <span class="title-value">
                  {{ item.title
                  }}{{
                    item.total || item.del
                      ? `(${$t("common.total")}：${item.total}/${$t(
                          "common.recovery"
                        )}：${item.del})`
                      : ""
                  }}
                </span>
              </div>
              <!--表格-->
              <Table
                v-if="item.render === 'table'"
                :key="item.jsonName + 'table' + index"
                :columns="item.columns"
                :data-source="item.data"
                size="small"
              ></Table>
              <ChatList
                v-if="item.render === 'chat'"
                :key="item.jsonName + 'chat' + index"
                :data="item.data"
              ></ChatList>
              <Info
                v-if="item.render === 'info'"
                :key="item.jsonName + 'info' + index"
                :data="item.data"
              ></Info>
              <ReportInfo
                v-if="item.render === 'reportInfo'"
                :key="item.jsonName + 'reportInfo' + index"
                :data="item.data"
              ></ReportInfo>
            </div>
          </template>
        </div>
      </div>

      <template #pagination>
        <div class="tips">
          {{
            $t("pagination.totalPages", {
              "%1": Math.ceil(page.totalSize / pageListSize),
            })
          }}
        </div>
        <div class="firstPage" @click="handleChange(1)">
          <a>{{ $t("pagination.firstPage") }}</a>
        </div>
        <a-pagination
          ref="pagination"
          :current="page.currentPage"
          :item-render="itemRender"
          :page-size="pageListSize"
          :total="page.totalSize"
          show-less-items
          show-quick-jumper
          @change="handleChange"
        />
        <div
          class="lastPage"
          @click="handleChange(page.totalSize / pageListSize)"
        >
          <a>{{ $t("pagination.lastPage") }}</a>
        </div>
        <div class="jumpPage">
          {{ $t("pagination.jumpTo") }}
          <a-input
            :style="{ width: '50px' }"
            @blur="handleBlur"
            @change="handleInputChange"
            @pressEnter="handlePressEnter"
          />
          {{ $t("pagination.page") }}
        </div>
      </template>
    </ResizeBox>
  </div>
</template>
<script>
import Tree from "@/components/Tree/index.vue";
import ResizeBox from "@/components/ResizeBox/index.vue";
import Table from "@/components/Table/index.vue";
import LabelManage from "@/components/LabelManage/index.vue";
import ChatList from "@/components/ChatList/index.vue";
import Info from "@/components/RenderBox/Info.vue";
import ReportInfo from "@/components/RenderBox/ReportInfo.vue";
import flagBox from "@/util/flagBox.js";
import Menu from "@/util/menu";
import { mapActions, mapState } from "vuex";
import { pageConfig, nodeToPage, pageListSize } from "@/util/pageConfig";
import { scrollToPageTop, scrollToTarget } from "@/util";
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
// import { QWebChannel } from "@/util/qwebchannel";

export default {
  components: {
    LabelManage,
    Table,
    ResizeBox,
    Tree,
    Info,
    // Pagination,
    ChatList,
    ReportInfo,
  },
  computed: {
    ...mapState(["isDev"]),
    ...mapState({
      page: (state) => state.page,
    }),
  },
  data() {
    return {
      interactObj: null,
      testUrl: "source/6F14F3ACA40E409985C4ED3CE968276F.jpg",
      visible: false,
      dataConfig: [],
      messageContent: [],
      pageListSize,
      flag: {
        show: false,
        rectConfig: null,
      },
      locale: zhCN,
      jumpOption: null,
    };
  },
  destroyed() {
    this.menu.destory();
  },

  // 渲染时获取数据
  mounted() {
    this.menu = new Menu(
      "#container",
      [{ label: this.$t("labelManage.addLabel"), value: "add" }],
      () => {
        // if (item.value === "add") {
        this.$emit("handleMeunClick");
        // }
      }
    );
  },
  methods: {
    ...mapActions("page", ["setCurrentPage"]),
    initJumpOption() {
      if (!this.jumpOption) {
        this.jumpOption =
          this.$refs.pagination.$children[0].$children[0].$children.find(
            (item) => {
              return item.$el._prevClass === "ant-pagination-options";
            }
          );
      }
    },
    handleBlur(e) {
      this.initJumpOption();
      this.jumpOption.handleBlur(e);
    },
    handleInputChange(e) {
      this.initJumpOption();
      this.jumpOption.handleChange(e);
    },
    handlePressEnter(e) {
      this.initJumpOption();
      this.jumpOption.go(e);
    },
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>{this.$t("pagination.prevPage")}</a>;
      } else if (type === "next") {
        return <a>{this.$t("pagination.nextPage")}</a>;
      }
      return originalElement;
    },
    // 通过页数设置数据
    async setDataConfigByPage(page) {
      if (!page || page === this.page.currentPage) return;
      flagBox.hide();
      await this.setCurrentPage(page);
      this.dataConfig = null;
      let pageConfigArr = JSON.parse(JSON.stringify(pageConfig[page]));
      let res = await Promise.all(
        pageConfigArr.map((item) => {
          return this.$getJson(
            `./json/${item.jsonName}.txt`,
            `${item.jsonName}`
          );
        })
      );
      if (res.includes(undefined)) {
        throw new Error("file not find");
      }
      this.dataConfig = Object.freeze(
        res.map((item, index) => {
          delete window[pageConfigArr[index].jsonName];
          return { ...item[0], ...pageConfigArr[index] };
        })
      );
      pageConfigArr = null;
      res = null;
      console.log(this.dataConfig);
    },
    // 通过节点设置数据
    async setDataConfig(node) {
      if (!node.dataConfig.jsonName) return;
      const page = nodeToPage[node.dataConfig.jsonName];
      try {
        this.$refs.labelMangeRef.currentIndex = -1;
        await this.setDataConfigByPage(page);
        scrollToTarget(node.dataConfig.jsonName);
      } catch (e) {
        console.error(e);
        console.error(page, pageConfig[page], node);
      }
    },
    // 菜单点击后得回调
    async afterClick(item, isSame) {
      console.log(item, isSame);
      await this.setDataConfigByPage(item.currentPage);
      this.$nextTick(() => {
        if (isSame) {
          flagBox.hide();
        } else {
          flagBox.show("#container", item);
          scrollToPageTop(item.offsetTop);
        }
      });
    },
    // 页码更改
    async handleChange(page) {
      await this.setDataConfigByPage(page);
    },
  },
};
</script>

<style lang="scss" scoped>
#container {
  color: #333333;

  .block-item {
    width: 100%;
    //min-width: 1000px;
    //&.chat {
    //  background-color: #ededed;
    //}

    .title {
      padding: 12px 0px;
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;

      .title-img {
        margin-right: 4px;
      }

      .title-value {
        margin-right: 8px;
        vertical-align: middle;
        white-space: nowrap;
      }

      &:after {
        display: inline-block;
        content: "";
        width: 100%;
        height: 1px;
        background-color: #c9d3d7;
        vertical-align: middle;
      }
    }
  }
}

.page {
  padding: 16px;
}

.home::v-deep {
  .pagination {
    border-top: 1px solid #c9d3d7;

    .firstPage,
    .lastPage {
      display: inline-block;
      border: 1px solid #0891b4;
      height: 32px;
      line-height: 32px;
      padding: 0 16px;
      vertical-align: middle;
      text-align: center;
      cursor: pointer;

      a {
        color: #0891b4;
      }
    }

    .firstPage,
    .tips {
      margin-right: 8px;
    }

    .lastPage,
    .jumpPage {
      margin-left: 8px;
    }

    .ant-pagination {
      li {
        border-radius: 0px;
      }
    }

    .ant-pagination-options {
      visibility: hidden;
      width: 0;
      margin: 0;
    }

    .ant-pagination-prev,
    .ant-pagination-next {
      border: 1px solid #0891b4;
      padding: 0 16px;

      a {
        color: #0891b4;
      }
    }

    .ant-pagination {
      .ant-pagination-jump-prev
        .ant-pagination-item-container
        .ant-pagination-item-link-icon,
      .ant-pagination-jump-next
        .ant-pagination-item-container
        .ant-pagination-item-link-icon {
        color: #0891b4;
      }

      .ant-pagination-item-active.ant-pagination-item {
        background-color: #0891b4;

        a {
          color: #ffffff;
        }
      }

      .ant-pagination-item {
        border: 1px solid #0891b4;

        a {
          color: #0891b4;
        }
      }
    }
  }
}
</style>
